


// React 实现简易的留言板 

import React, { Component, createRef } from 'react';
import PropTypes from 'prop-types';
import { styles } from './../utils/common';
import MyBtn from './MyBtn';


class TodoListOne extends Component {

    title = createRef()
    content=createRef()

    state = {
        comments:[
            {title:'Vue',content:'Vue is so easy'},
            {title:'React',content:'React is so cute '},
            {title:'小程序',content:'小程序 不难也不简单 '},
            {title:'原生JS',content:'水太深了...'},
            {title:'CSS',content:'样式太烦了...'}
        ]
    }   
    // 修改
    updateOne=(item,index)=>{
        let content = window.prompt(item.title,item.content)
        // console.log(content)
        if(content && content !=item.content){
            this['item_'+index].classList = "bounce"
            item.content = content;
            this.state.comments.splice(index,1,item)
            this.setState({
                comments:this.state.comments 
            })
            
            setTimeout(()=>{
                this['item_'+index].classList.remove("bounce")
            },1000)
        }   
    }
    // 删除
    deleteOne=(item,index)=>{
        if(window.confirm('你确定要删除吗?')){
            // console.log(this['item_'+index])
            this['item_'+index].classList.add('min-leave-active')
            setTimeout(()=>{
                this.state.comments.splice(index,1)
                this.setState({
                    comments:this.state.comments 
                })
            },1000)
        }
    }

    // 添加
    addToComment=()=>{
        const title = this.title.current.value
        const content = this.content.current.value
        if(title && content){
            this.state.comments.unshift({
                title,
                content 
            })
            this.setState({
                comments:this.state.comments 
            })
            this.resetData()
        }else{
            window.alert('请先完善数据')
        }
    }
    // 重置
    resetData=()=>{
        this.title.current.value = ''
        this.content.current.value = ''
    }
    render() {
        const {comments}  = this.state;
        return (
            <div>
                <h2> React 实现简易的留言板   </h2>
                <div style={styles.box}>
                    <h3>展示留言 </h3>
                    <div>
                        {
                            comments.map((item,index)=>{
                                return (
                                    <div ref={el=>this['item_'+index]=el} className='item min-enter-active' key={item.title}  style={{margin:'15px 0',background:'orange',borderRadius:10,padding:5,animationDelay:10 * index +'ms' }}>
                                        <p>序号:{index+1}</p>
                                        <p>标题:{item.title}</p>
                                        <p>内容:{item.content}</p>
                                        <p>操作 ：
                                            <MyBtn text="删除" onClick={ ()=>this.deleteOne(item,index) }></MyBtn>
                                            <MyBtn text="修改" onClick={ ()=>this.updateOne(item,index) } style={{color:'#fff',background:'pink'}}></MyBtn>
                                        </p>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>

                <div style={styles.box}>
                    <h3>提交留言</h3>
                    <div>
                        <p>标题: <input type="text" ref={this.title}   placeholder='请输入'/></p>
                        <p>内容: <input type="text" ref={this.content}  placeholder='请输入'/></p>
                        <p>
                            <MyBtn text="添加" onClick={this.addToComment}></MyBtn>
                            <MyBtn text="重置" onClick={this.resetData}  style={{color:'#fff',background:'#ddd'}}></MyBtn>
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}


TodoListOne.propTypes = {

};


export default TodoListOne;
